<template>
    <view class="container">
		<view class="">
			  <u--image
			    :src="memberFlag == 1 ? 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/06/03/14051f6ec7cf4353891a84e5d7ffb6b4.png' : 'https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/06/03/a735ae12e98448ce90e5380e72fdc9ed.png'"
			    width="100%"
			    height="550rpx"
			    @click="click"
			  ></u--image>
		</view>
		<view class="box">
			<view class="boxs" @click="tobtn()">
				<u-text text="在线问诊" bold lineHeight="50rpx" size="36rpx" color="#54ADE7" />
				<u-text text="足不出户，一键连接专业医疗" lineHeight="34rpx" size="24rpx" color="#3D3D3D" margin="12rpx 0" />
				<view style="width: 128rpx;">
					<u-button text="去问诊" :customStyle="buttonStyle" color="linear-gradient( 97deg, #54ADE7 0%, #7BB8EA 100%)" shape="circle" @click ="cancelOrder(item.id)" />
				</view>
			</view>
			
			<view class="boxs1" @click="tobtn1()">
				<u-text text="十蜂数字人" bold lineHeight="50rpx" size="36rpx" color="#66B9C2" />
				<u-text text="健康档案数字化管理" lineHeight="34rpx" size="24rpx" color="#3D3D3D" margin="12rpx 0" />
				<view style="width: 128rpx;">
					<u-button text="去看看" :customStyle="buttonStyle" color="linear-gradient( 97deg, #66B9C2 0%, #6DC6AD 100%)" shape="circle" @click ="cancelOrder(item.id)" />
				</view>
			</view>
			
			<view class="boxs2" @click="tobtn2()">
				<u-text text="服务网络" bold lineHeight="50rpx" size="36rpx" color="#E9AD55" />
				<u-text text="覆盖全国多家合作医院" lineHeight="34rpx" size="24rpx" color="#3D3D3D" margin="12rpx 0" />
				<view style="width: 128rpx;">
					<u-button text="去了解" :customStyle="buttonStyle" color="linear-gradient( 180deg, #E9AD55 0%, #F2C165 100%)" shape="circle" @click ="cancelOrder(item.id)" />
				</view>
			</view>
		</view>
		
		<!-- 视频列表 -->
		<view v-if="showVideo">
			<indexVideo></indexVideo>
		</view>
		
		<!-- 二维码弹窗组件 -->
		<qrcode-popup
		  :show="showQRCodePopup"
		  :qrcodeImage="qrcodeImageUrl"
		  title="请前往小程序成为会员"
		  @close="handleQRCodeClose"
		  @save-success="handleQRCodeSaveSuccess"
		  @save-fail="handleQRCodeSaveFail"
		/>
    </view>
</template>

<script>
	import indexVideo from "./indexVideo.vue";
	import { mapState } from "vuex";
	import QRCodePopup from '@/components/qrcode-popup/qrcode-popup.vue';
export default {
    data() {
        return {
            buttonStyle: {
				width: "128rpx",
				height: "44rpx",
				fontSize: "24rpx",
				color: "#fff",
			},
			showQRCodePopup: false,
			qrcodeImageUrl: "/static/images/wx_show_code.jpg", // 小程序二维码图片路径
        };
    },
    computed: {
        ...mapState(["userInfo", "isLogin", "showVideo","memberFlag"]),
    },
	components: {
	    indexVideo,
	    QRCodePopup,
	},
    onLoad() {
    },
    methods: {
		tobtn(){
			// 企业微信客服APP端不支持，使用uni.makePhoneCall代替
			uni.showModal({
				title: '提示',
				content: '是否拨打客服电话？',
				success: function(res) {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: '400-8596-598', // 替换为实际客服电话
							success: function() {
								console.log('拨打电话成功');
							},
							fail: function() {
								uni.showToast({
									title: '拨打失败',
									icon: 'none'
								});
							}
						});
					}
				}
			});
		},
		tobtn1(){
			uni.navigateToMiniProgram({
			    appId: "wx78222dd79fa05607",
			    path: `/pages/index/index`, // 不填默认首页
			    success(res) {},
			});
		},
		tobtn2(){
			
		},
		click(){
			if(this.memberFlag == 1){
				uni.navigateTo({
					url: `/pages_balance/butler/index`,
				});
			}else{
				// 显示二维码弹窗，引导用户到小程序成为会员
				this.showQRCodePopup = true;
			}
		},
		
		// 二维码弹窗相关方法
		handleQRCodeClose() {
			this.showQRCodePopup = false;
		},
		
		handleQRCodeSaveSuccess() {
			console.log('二维码保存成功');
		},
		
		handleQRCodeSaveFail(error) {
			console.log('二维码保存失败:', error);
		}
    }
};
</script>

<style lang="scss">
.container{
	background: #F9FAFB;
	height: 100vh;
}
.box{
	padding: 12rpx 40rpx 0 30rpx;
}
.boxs{
	width: 100%;
	background-image: url("https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/05/28/64c776ade1004319939ba1963e445229.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding: 24rpx 0 26rpx 50rpx;
	margin-bottom: 32rpx;
}
.boxs1{
	width: 100%;
	background-image: url("https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/05/28/6d0ccfbc95f64ba1bc414a196013081c.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding: 24rpx 0 26rpx 50rpx;
	margin-bottom: 32rpx;
}
.boxs2{
	width: 100%;
	background-image: url("https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2025/05/28/b45d2071df754102a680ad4ce01e3cd0.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding: 24rpx 0 26rpx 50rpx;
	margin-bottom: 32rpx;
}
</style>
